extends /templates/base

block content
  div#ladder-top

    if view.leagueType === 'course' && view.course
      #course-header
        #course-details-link
          // TODO: this styling should be changed, was only ever meant to be a mockup
          if view.isSchoolAdmin
            a(href='/school-administrator/teacher/' + view.ownerID + '/classroom/' + view.classroomID + '#course-progress-tab')
              span.glyphicon.glyphicon-arrow-left
              span.spl(data-i18n="nav.play")
          else if view.isTeacher
            a(href='/teachers/classes/' + view.classroomID + '#course-progress-tab')
              span.glyphicon.glyphicon-arrow-left
              span.spl(data-i18n="nav.play")
          else
            a(href=view.urls.courseWorldMap({course: view.course, courseInstance: view.courseInstance}))
              span.glyphicon.glyphicon-arrow-left
              span.spl(data-i18n="nav.play")

        .text-center
          span#course-name
            span= i18n(view.course.attributes, 'name')
            span.spl - Arena

    div#level-column
      if view.levelBanner
        img(src=`/file/${view.levelBanner}` alt=`${i18n(view.level.attributes, 'name')}`)
      else if view.levelDescription
        img(src="/images/pages/play/ladder/multiplayer_notext.jpg" alt=`${i18n(view.level.attributes, 'name')}`)
        span.dynamic-level-name= i18n(view.level.attributes, 'name')
      if view.levelDescription
        div!= view.levelDescription

      if view.leagueType === 'clan'
        h1.league-header
          a(href='/clans/' + view.league.id)= view.tournamentDisplayName || view.league.get('displayName') || view.league.get('name')
          span.spl(data-i18n="ladder.league") League

    if view.level.get('name') === 'Greed'
      .tournament-blurb
        h2
          span(data-i18n="ladder.tournament_ended")
          span.spl= view.tournamentTimeLeftString
        p
          span(data-i18n="ladder.tournament_blurb")
          a.spl(href="http://blog.codecombat.com/a-31-trillion-390-billion-statement-programming-war-between-545-wizards", data-i18n="ladder.tournament_blurb_blog") on our blog
          span .
        p
          strong Tournament ended!
          a.spl(href="#winners") Behold the winners
          | . Thanks for playing! You can
          strong.spl still play
          |  Greed and all of our other
          a.spl(href="/play/ladder") multiplayer arenas
          | .
        p
          | Want to commiserate? Head over to
          a.spl(href="http://discourse.codecombat.com/") the forum
          span.spl and discuss your strategies, your triumphs, and your turmoils.

    if view.level.get('name') == 'Criss-Cross'
      .tournament-blurb
        h2
          span(data-i18n="ladder.tournament_ended") Tournament ended
          span.spl= view.tournamentTimeLeftString
        p
          span(data-i18n="ladder.tournament_blurb_criss_cross") Win bids, construct paths, outwit opponents, grab gems, and upgrade your career in our Criss-Cross tournament! Check out the details
          a.spl(href="http://blog.codecombat.com/a-good-new-fashioned-programming-throwdown", data-i18n="ladder.tournament_blurb_blog") on our blog
          span .
        p
          strong Tournament ended!
          a.spl(href="#winners") Behold the winners
          | . Thanks for playing! You can
          strong.spl still play
          |  Criss-Cross and all of our other
          a.spl(href="/play/ladder") multiplayer arenas
          | .
        p
          | Want to commiserate? Head over to
          a.spl(href="http://discourse.codecombat.com/") the forum
          |  and discuss your strategies, your triumphs, and your turmoils.

    if view.level.get('name') == 'Zero Sum' && !view.league
      .tournament-blurb
        h2
          span(data-i18n="ladder.tournament_ended") Tournament ended
          span.spl= view.tournamentTimeLeftString
        p
          span(data-i18n="ladder.tournament_blurb_zero_sum") Unleash your coding creativity in both gold gathering and battle tactics in this alpine mirror match between red sorcerer and blue sorcerer. The tournament began on Friday, March 27 and will run until Monday, April 6 at 5PM PDT. Compete for fun and glory! Check out the details
          a.spl(href="http://blog.codecombat.com/kings-of-zero-sum-strategies-from-the-ai-wars", data-i18n="ladder.tournament_blurb_blog") on our blog
          span .
        p
          strong Tournament ended!
          a.spl(href="#winners") Behold the winners
          span . Thanks for playing! You can
          strong.spl still play
          span.spl Zero Sum as long as you like.
        p
          span Want to commiserate? Head over to
          a.spl(href="http://discourse.codecombat.com/") the forum
          span.spl and discuss your strategies, your triumphs, and your turmoils.


    #tournament-status
      if !view.tournamentState && view.globalAILeagueEnds
         .ai-league-info(data-i18n="ladder.ai_league_ends", data-i18n-options={ time: view.globalAILeagueEnds })
      if view.tournamentState == 'initializing'
        #tournament-status
          p
            span(data-i18n="ladder.tournament_starts" data-i18n-options={timeElapsed: view.tournamentTimeElapsedString})
      else if view.tournamentState == 'starting'
        #tournament-status
          p
            span(data-i18n="ladder.tournament_started", data-i18n-options={timeElapsed: view.tournamentTimeElapsedString})
            span(data-i18n="ladder.tournament_ends", data-i18n-options={timeLeft: view.tournamentTimeLeftString})
      else if ['ranking', 'waiting', 'abandoned'].includes(view.tournamentState)
        p
          span(data-i18n="ladder.tournament_ended", data-i18n-options={timeLeft: view.tournamentTimeLeftString})
          if view.tournament.get('resultsDate')
            span(data-i18n="ladder.tournament_results_published", data-i18n-options={timeLeft: view.tournamentResultsTimeLeftString})
          else
            span(data-i18n="ladder.tournament_results_wait_publish")
      else if view.tournamentEnd
        if view.tournamentTimeLeftString
          p
            span(data-i18n="ladder.tournament_ended", data-i18n-options={timeLeft: view.tournamentTimeLeftString})
        else
          p(data-i18n="ladder.tournament_end_desc")

    if !view.tournamentEnd
      div#ladder-action-columns.row
        - var realUltimatePower = me.isAdmin() && (me.get('slug') == 'nick' || features.china);
          if view.level.isType('ladder')
            div.column.column-4
              a.btn.btn-illustrated.btn-block.btn-lg.btn-success.play-button(data-team='humans')
                span(data-i18n="common.play")
            if !window.features.chinaUx
              div.column.column-2
                a.btn.btn-illustrated.btn-block.btn-lg.btn-info(data-team='humans' href="https://www.youtube.com/watch?v=niKXOofTckEor" target="_blank")
                  span.glyphicon.glyphicon-facetime-video
                  span.spl Tutorial
          else if view.teams
            for team in view.teams
              div.column.column-3
                a(class="play-button btn btn-illustrated btn-block btn-lg " + (team.id === 'ogres' ? 'btn-primary' : 'btn-danger'), data-team=team.id)
                  span(data-i18n="play_level.play_as_" + team.id)
            if view.ladderTab
              div.column.column-2
                a.btn.btn-illustrated.btn-block.btn-lg.btn-info.spectate-button(href='/play/spectate/' + view.level.get('slug') + (view.league ? "?league=" + view.league.id : ""))
                  span.glyphicon.glyphicon-eye-open
                  span.spl(data-i18n="play.spectate")
        div.column.column-3
          if realUltimatePower
            // This button could consume a lot of server resources
            a.btn.btn-illustrated.btn-block.btn-lg.btn-info.simulate-all-button
              span(data-i18n="play.simulate_all")
          else if !me.isTeacher() && !me.isAnonymous() && !me.isRegisteredForAILeague() && view.isAILeagueArena()
            a.btn.btn-illustrated.btn-block.btn-lg.btn-primary.register-for-ai-league-button(href="/league?registering=true")
              span(data-i18n="league.register_for_ai_league")
    else if view.tournament && ['ranking', 'waiting', 'abandoned', 'ended'].indexOf(view.tournamentState) !== -1
      div#ladder-action-columns.row
        if !features.china
          div.column.column-4
            a.btn.btn-illustrated.btn-block.btn-lg.btn-info.play-arena-button(href="/play/ladder/"+view.levelID)
              span(data-i18n="courses.play_arena")
        if ['waiting', 'abandoned'].includes(view.tournamentState) && view.league && (me.get('_id') === view.league.get('ownerID') || me.isAdmin())
          div.column.column-2
            a.btn.btn-illustrated.btn-block.btn-lg.btn-success.publish-button
              span(data-i18n="tournament.publish_results")
        if me.isAdmin() && (['ranking', 'waiting', 'abandoned'].includes(view.tournamentState))
          div.column.column-2
            a.btn.btn-illustrated.btn-block.btn-lg.btn-info.early-results-button(href='#results')
              span.glyphicon.glyphicon-star
              span.spl(data-i18n="tournament.view_results")
    if view.level.isType('ladder')
      div#spectate-row.row
        span(data-i18n="play.spectate")
        span :
        div.spectate-players
          input(type='search' id='spectate-player-1' list="spectate-players-1" autocomplete="off")
          datalist(id='spectate-players-1')
            each rk in view.leaderboardRankings
              option(value=`${rk[2]}: ${rk[3]}`)
        span VS.
        div.spectate-players
          input(type='search' id='spectate-player-2' list="spectate-players-2" autocomplete="off")
          datalist(id='spectate-players-2')
            each rk in view.leaderboardRankings
              option(value=`${rk[2]}: ${rk[3]}`)
        a.btn.btn-illustrated.btn-info.new-spectate-button
          span.glyphicon.glyphicon-eye-open
          span.spl(data-i18n="hackstack.view")
      
  if view.level.isType('ladder')
    if view.winners
      ul.nav.nav-pills
        li.active
          a(href="#ladder", data-toggle="tab", data-i18n="general.ladder") Ladder
        li
          a(href="#winners", data-toggle="tab", data-i18n="ladder.winners") Winners
    else
      .inline-simulation-stats
        #simulate-tab-view
  else
    if !me.isAdmin()
      .inline-simulation-stats
        #simulate-tab-view
    ul.nav.nav-pills
      li.active
        a(href="#ladder", data-toggle="tab", data-i18n="general.ladder") Ladder
      if !me.get('anonymous')
        li
          a(href="#my-matches", data-toggle="tab", data-i18n="ladder.my_matches") My Matches
        if view.leagueType !== 'course' && me.isAdmin()
          li
            a(href="#simulate", data-toggle="tab", data-i18n="ladder.simulate") Simulate
      if view.winners
        li
          a(href="#winners", data-toggle="tab", data-i18n="ladder.winners") Winners

  //don't render when tournament is ended in order to control page height
  div.row.tab-content(style="padding: 0 15px 0 15px;")
    if view.level.isType('ladder')
      if view.winners
        .tab-pane.active.well#ladder
          #ladder-tab-view
          #new-leaderboard-view
          #my-matches-tab-view
          #simulate-tab-view
        if view.level.get('name') === 'Ace of Coders'
          .tab-pane.well#winners
            h1(data-i18n="ladder.winners") Winners

            table.table.table-hover.table-condensed
              thead
                tr
                  th(data-i18n="ladder_prizes.rank") Rank
                  th
                  th(data-i18n="general.player") Player
                  th Wins
                  th Losses
                  th(data-i18n="play.spectate") Spectate
              tbody
                each player in view.winners.humans
                  tr
                    td= player.rank
                    td.code-language-cell(style=`background-image: url(/images/common/code_languages/${player.codeLanguage}_icon.png)` title=_.string.capitalize(player.codeLanguage))
                    td= player.name
                    td
                      span.win= player.wins
                    td
                      span.loss= player.losses
                    td
                      if player.team === "ogres"
                        a(href="/play/spectate/" + view.level.get('slug') + "?session-one=55df8c9207d920b7e4262f33" + "&session-two=" + player.sessionID, data-i18n="ladder.watch_battle") Watch the battle
                      else
                        a(href="/play/spectate/" + view.level.get('slug') + "?session-one=" + player.sessionID + "&session-two=55e1d23686c019bc47b640fe", data-i18n="ladder.watch_battle") Watch the battle
        else
          .tab-pane.well#winners
      else
          #ladder-tab-view
          #new-leaderboard-view
          #my-matches-tab-view
          if !me.isStudent() && !me.isTeacher() && view.isAILeagueArena() && !features.china
            .clearfix
            #team-offers
              .row
                .col-xs-12
                  h2(data-i18n="league.join_teams_header")
                for team in view.teamOffers
                  - var joinedTeam = (me.get('clans') || []).indexOf(team.clanId) != -1
                  .col-md-6.col-xs-12
                    .row.team-offer
                      .col-xs-12
                        h3(data-i18n="league.join_team_" + team.slug.replace('-', '_') + "_title")
                      .col-md-6.col-xs-3
                        if joinedTeam
                          a.btn.btn-illustrated.btn-lg.btn-block.btn-primary(href="/league/" + team.clanSlug, data-i18n="league.view_team")
                        else
                          a.btn.btn-illustrated.btn-lg.btn-block.btn-success.join-clan-button(href="/league/" + team.clanSlug, data-clan-id=team.clanId, data-i18n="league.join_team_name", data-i18n-options={name: team.name})
                      .col-md-6.col-xs-3
                        p(data-i18n="league.join_team_" + team.slug.replace('-', '_') + "_blurb")
              .clearfix
    else
      .tab-pane.active.well#ladder
        #ladder-tab-view
        #new-leaderboard-view
      .tab-pane.well#my-matches
        #my-matches-tab-view
      if me.isAdmin()
        .tab-pane.well#simulate
          #simulate-tab-view

      if view.level.get('name') === 'Greed' || view.level.get('name') === 'Criss-Cross' || view.level.get('name') === 'Zero Sum'
        .tab-pane.well#winners
          h1(data-i18n="ladder.winners") Winners

          table.table.table-hover.table-condensed
            thead
              tr
                th(data-i18n="ladder_prizes.rank") Rank
                if view.level.get('name') === 'Criss-Cross' || view.level.get('name') === 'Zero Sum'
                  th
                th Human
                if view.level.get('name') === 'Greed' || view.level.get('name') === 'Zero Sum'
                  th Human wins/losses/ties
                else
                  th Human score
                if view.level.get('name') === 'Zero Sum'
                  th
                if view.level.get('name') === 'Criss-Cross' || view.level.get('name') === 'Zero Sum'
                  th
                th Ogre
                if view.level.get('name') === 'Greed' || view.level.get('name') === 'Zero Sum'
                  th Ogre wins/losses/ties
                else
                  th Ogre score
                th(data-i18n="play.spectate") Spectate
            tbody
              each human, index in view.winners.humans
                - var ogre = view.winners.ogres[index]
                tr
                  td= human.rank
                  if view.level.get('name') === 'Criss-Cross' || view.level.get('name') === 'Zero Sum'
                    td.code-language-cell(style=`background-image: url(/images/common/code_languages/${human.codeLanguage}_icon.png)` title=_.string.capitalize(human.codeLanguage))
                  td= human.name
                  if view.level.get('name') === 'Greed' || view.level.get('name') === 'Zero Sum'
                    td
                      span.win= human.wins
                      span.spl -
                      span.loss= human.losses
                      span.spl -
                      if view.level.get('name') === 'Greed'
                        span.tie= 377 - human.wins - human.losses
                      else if view.level.get('name') === 'Zero Sum'
                        span.tie= 108 - human.wins - human.losses
                  else
                    td
                      span= Math.round(100 * human.score)
                  if ogre
                    if view.level.get('name') === 'Zero Sum'
                      td= ogre.rank
                    if view.level.get('name') === 'Criss-Cross' || view.level.get('name') === 'Zero Sum'
                      td.code-language-cell(style=`background-image: url(/images/common/code_languages/${ogre.codeLanguage}_icon.png)` title=_.string.capitalize(ogre.codeLanguage))
                    td= ogre.name
                    if view.level.get('name') === 'Greed' || view.level.get('name') === 'Zero Sum'
                      td
                        span.win= ogre.wins
                        span.spl -
                        span.loss= ogre.losses
                        span.spl -
                        if view.level.get('name') === 'Greed'
                          span.tie= 407 - ogre.wins - ogre.losses
                        else if view.level.get('name') === 'Zero Sum'
                          span.tie= Math.max(0, 163 - ogre.wins - ogre.losses)
                    else
                      td
                        span= Math.round(100 * ogre.score)
                    td
                      a(href="/play/spectate/" + view.level.get('slug') + "?session-one=" + human.sessionID + "&session-two=" + ogre.sessionID, data-i18n="ladder.watch_battle") Watch the battle
                  else
                    td
                    td
                    td

      if view.level.get('name') === 'Battle of Red Cliffs'
        .tab-pane.well#winners
          h1(data-i18n="ladder.winners") Winners

          h2
            a(href="https://www.youtube.com/watch?v=1DGKmmUssrA&feature=youtu.be") Watch the awards ceremony!

          p Overall rank determined by # of wins against top 750 players. Players not in top 750 at time of ranking have estimated win scores based on their prior ladder ranking. Players outside top 10 were placed in the Open bracket if not enough registration information was provided. Prizes depended on supplying registration information.

          table.table.table-hover.table-condensed
            thead
              tr
                th(data-i18n="ladder_prizes.rank") Rank
                th(data-i18n="teachers_quote.country")
                th(data-i18n="general.player") Player
                th Wins
                th Losses
                th Rank 1-3
                th Rank 4-6
                th Rank 7-12
                th Rank Open
                th(data-i18n="play.spectate") Spectate
            tbody
              each player in view.winners
                tr
                  td= player.rankOverall
                  td= _.string.titleize(player.country)
                  td= player.name || $.i18n.t('play.anonymous')
                  td
                    span.win= player.wins || 0
                  td
                    span.loss= player.losses || 750
                  td= player.rankElementary
                  td= player.rankMiddle
                  td= player.rankHigh
                  td= player.rankOpen
                  td
                    a(href="/play/spectate/" + view.level.get('slug') + "?session-one=" + player.sessionID + "&session-two=5f24bb6f5737013ff31e827c", data-i18n="ladder.watch_battle") Watch the battle
